<template>
  <template v-if="user">
    <van-cell>
      <van-uploader style="display: flex; justify-content: center;" accept="image/png, image/jpeg" :max-size="1024 * 1024 * 11">
        <van-image
            round
            width="5rem"
            height="5rem"
            :src="user.avatarUrl"
        />
      </van-uploader>
    </van-cell>
    <van-cell title="账号" :value="user.userAccount">
      <template #icon>
        <van-icon name="like-o" style="top: 5px;margin-left: 5px;right: 5px;color: #ff0000"/>
      </template>
    </van-cell>
    <van-cell title="昵称" is-link to="/user/edit" :value="user.username"  @click="toEdit('username', '昵称', user.username)">
    <template #icon>
      <van-icon name="like-o" style="top: 5px;margin-left: 5px;right: 5px;color: #ff0000"/>
    </template>
    </van-cell>
    <van-cell icon="user-circle-o" title="性别" is-link @click="()=>showPicker=true">
      <span v-if="user.gender===1">男</span>
      <span v-if="user.gender===0">女</span>
<!--      <template #icon>-->
<!--        <van-icon v-if="user.gender===1" name="user-circle-o"-->
<!--                  style="top: 5px;margin-left: 5px;right: 5px;color: #0029ff"/>-->
<!--        <van-icon v-if="user.gender===0" name="user-circle-o"-->
<!--                  style="top: 5px;margin-left: 5px;right: 5px;color: #ff0000"/>-->
<!--      </template>-->
      <template #icon>
        <van-icon name="like-o" style="top: 5px;margin-left: 5px;right: 5px;color: #ff0000"/>
      </template>
    </van-cell>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
          title="性别"
          :columns="genders"
          @confirm="onConfirmGender"
          @cancel="()=>showPicker=false"
      />
    </van-popup>
    <van-cell title="电话" is-link to="/user/edit" :value="user.phone" @click="toEdit('phone', '电话', user.phone)">
    <template #icon>
      <van-icon name="like-o" style="top: 5px;margin-left: 5px;right: 5px;color: #ff0000"/>
    </template>
    </van-cell>
    <van-cell title="邮箱" is-link to="/user/edit" :value="user.email" @click="toEdit('email', '邮箱', user.email)">
      <template #icon>
        <van-icon name="like-o" style="top: 5px;margin-left: 5px;right: 5px;color: #ff0000"/>
      </template>
    </van-cell>
    <van-cell title="星球编号" :value="user.planetCode">
      <template #icon>
        <van-icon name="like-o" style="top: 5px;margin-left: 5px;right: 5px;color: #ff0000"/>
      </template>
    </van-cell>
  </template>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";
import {getCurrentUser} from "../services/user";

const user = ref();
const showPicker = ref(false);
const genders = [
  {text: '男', value: 1},
  {text: '女', value: 0},
];

onMounted(async () => {
  await refresh()
})

const router = useRouter();

const toEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editName,
      currentValue,
    }
  })
}
const onConfirmGender = async (selectedValues) => {
  const res = await myAxios.post("/user/update", {
    'id': user.value.id,
    gender: selectedValues.value
  })
  if (res?.code === 0) {
    Toast.success("修改成功")
  } else {
    Toast.fail("修改失败")
  }
  showPicker.value = false
   await refresh()
};

const refresh = async () => {
  user.value = await getCurrentUser();
}

</script>

<style scoped>

</style>
